Day8-課題內容

今天的內容中要來深入學習console物件的相關方法。雖然我們一般都透過console.log，在開發者工具的console中印出我們想知道的資料，但其實還有許多不同的功能。[1]

Console物件

console物件提供了一個接口，可以連接到瀏覽器中的debugging console，並透過不同的方法輸出對應的訊息。[2][3]

Console methods

1. 一般用法：console.log()

console.log('Hello World!!')

2. 使用參數：透過加上%s，可以透過參數的方式印出字串。

 console.log("Hello I'm a %s", "insert text");

3. 修改字型樣式：透過在前面加上%c，可以將印出來的字串，修改成我們想要的樣式。

console.log("%c Let's do this!", "color:red; font-size:20px;");

4. warning：輸出一條類似console.log()的消息，但同時在記錄的消息旁顯示一個黃色警告圖標。

console.warn('Warning!');

5. error：輸出一條類似於console.log()的消息，將消息設置成錯誤樣式。

console.error('You should not pass!!');

6. info：輸出一條類似console.log()的消息，但同時在輸出旁顯示一個資訊圖標。

console.info("What's wrong?");

筆者在這邊試了很多次都沒有圖標出現，如果有知道為什麼的人拜託請告訴我，我會感謝您的大恩大德！

7. assert：在被評估的表達式爲false時，向控制檯寫入一個錯誤。

console.assert(1===2, 'Oh No~');

8. clear：清除控制檯。

console.clear();

9. dir：輸出以JavaScript形式表示的指定對象。如果正在記錄的對象是HTML元素，將輸出其以DOM形式表示的屬性。

const p =document.querySelector('p');
console.log(p);
console.dir(p);

10. group：啓動一個帶有可選標題的新日誌組。以可視化方式將在console.group()後、console.groupEnd()前發生的所有控制檯輸出組合在一起。

const dogs = [
      { name: 'Snickers', age: 2 }, 
      { name: 'hugo', age: 8 },
      { name: 'Poppy', age: 1}
];

dogs.forEach(function(dog){
    console.group(dog['name']);
    console.log(`${dog['name']} is ${dog['age']} years old!`);
    console.groupEnd(dog['name']);
});

11. count：寫入在同一行使用相同標籤調用count()的次數。

const text = ['a', 'b', 'a', 'b', 'c', 'a', 'b'];
text.forEach(function(letter){
    console.count(letter);
});

12. time：啓動一個具有關聯標籤的新計時器。使用相同標籤調用console.timeEnd()時，定時器將停止，經過的時間將顯示在控制檯中。

console.time("Array initialize");
var array = ['a', 'b', 'c', 'd', 'e', 'f'];
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
}
console.timeEnd("Array initialize");

總結

今天學到console物件的其他各種方法，讓我們可以在開發者工具中可以印出不同的資料，大家可以多利用適合的方法，來加速函式的撰寫哦！

參考資料

1. javascript30
2. MDN-console
3. Tools for Web Developers-Console API 參考